<template>
	<view class="container">
		<!-- 我的诚信值 -->
		<view class="my-value">
			<!-- 背景图 -->
			<image src="http://images.linglinggong.net/icon1/25.png" mode="aspectFill"></image>
			<view class="main">
				<view>诚信值 （分）</view>
				<view>{{ userInfo.integrity/100 }}</view>
			</view>
		</view>

		<!-- 类目 -->
		<view class="category">
			<view :class="flag == 0 ? 'select' : ''" @tap="handleTypeChange(0)">全部记录</view>
			<view :class="flag == 1 ? 'select' : ''" @tap="handleTypeChange(1)">加分记录</view>
			<view :class="flag == 2 ? 'select' : ''" @tap="handleTypeChange(2)">减分记录</view>
		</view>
		<!-- 流水列表 -->
		<view class="honest-list">
			<view v-for="item in honestList" :key="item.id">
				<view>
					<view>{{ item.remark }}</view>
					<view>{{ item.createTime }}</view>
				</view>
				<view :class="item.amount > 0 ? 'add' : 'reduce'">{{ item.amount > 0 ? `+${item.amount}` : item.amount }}</view>
			</view>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			uniLoadMore,
		},
		data() {
			return {
				userInfo: { user: {}, params: {} },//当前用户信息
				hasFlag: true, // 是否还有更多数据要加载
				flag: 0, //当前类目
				amount: -200,//
				requestObj: {
					type: 50,
					pageNum: 0,
					pageSize: 20,
				},
				honestList: [],//诚信值列表
				serviceTelephone: '',//客服电话
				isNoMore:false,
			}
		},
		methods: {
			// 刷新
			refresh() {
				this.honestList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 20
				this.my_flow()
			},
			
			// 获取诚信值
			async my_flow() {
				if (!this.hasFlag) return // 说明已经没有更多啦
				this.requestObj.pageNum = ++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.my_flow, this.requestObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				// 整理数据
				res.rows.forEach(item => {
					item.amount = (item.amount/100)
				})
				// 拼接
				this.honestList = [...this.honestList, ...res.rows]
				this.hasFlag = this.honestList.length < res.total
			},
			
			// 更改类目
			handleTypeChange(a) { 
				if (this.flag === a) return
				this.flag = a
				if(this.flag == 1) {
					this.requestObj.typeIn = "51,53,56,57" 
				}else if(this.flag == 2) {
					this.requestObj.typeIn = "52,54,55"
				}else {
					this.requestObj = {
						type: 50,
						pageNum: 0,
						pageSize: 20,
					}
				}
				this.refresh()
			},
			// 获取电话
			async getServiceTelephone(){
				let res = await this.$fetch(this.$api.property_list_by_type, { type: 1 }, 'POST')
				// 客服电话
				uni.setStorageSync('serviceTelephone', res.data.telephone)
				this.serviceTelephone = uni.getStorageSync('serviceTelephone')
			},
		},
		onLoad() {
		},
		onShow() {
			this.refresh()
			this.userInfo = uni.getStorageSync('userInfo')
			this.getServiceTelephone()
		},
		onReachBottom() {
			this.isNoMore=true
			this.my_flow()//再次调用接口
		},
		onNavigationBarButtonTap() {
			uni.showModal({
				title: '提示',
				content: '是否拨打电话？',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({ phoneNumber: this.serviceTelephone })
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
	}
</script>

<style lang="less" scoped> 
.container {
	& > .my-value {
		position: relative;
		text-align: center;
		width: 690rpx;
		height: 280rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03) inset;
		
		& > image {
			top: 0;
			left: 0;
			position: absolute;
			width: 750rpx;
			height: 276rpx;
		}
		
		& > .main {
			position: relative;
			top: 66rpx;
			z-index: 1;
			
			& > view:nth-child(1){
				color: rgba(64,33,16,0.70);
				margin-bottom: 20rpx;
				height: 40rpx;
			}
			& > view:nth-child(2) {
				font-size: 32px;
				height: 90rpx;
			}
		}
	
		
	}
	& > .category {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		background-color: #FFFFFF;
		& > view {
			position: relative;
			height: 90rpx;
			display: flex;
			flex: 33.33%;
			justify-content: center;
			align-items: center;
			color: rgba(64,33,16,0.50);
			// border: 1px solid #000000;
			// 选中样式
			&.select {
				color: #F39B19;;
				font-weight: bold;
				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: 95rpx;
					width: 60rpx;
					height: 4rpx;
					background: #F39B19;
					border-radius: 1px;
				}
			}
		}
	}
	& > .honest-list {
		background-color: #FFFFFF;
		& > view {
			position: relative;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			& > view {
				& > view:first-child {
					height: 40rpx;
					color: #000000;
					margin-bottom: 10rpx;
				}
				& > view:last-child {
					height: 34rpx;
					font-size: 12px;
					color: #A2A2A2;
				}
			}
			& > .add {
				font-weight: bold;
				font-size: 17px;
				color: #4E9800;
			}
			& > .reduce {
				font-weight: bold;
				font-size: 17px;
				color: #C9281C;
			}
			&::before {
				content: "";
				position: absolute;
				top: 124rpx;
				width: 720rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 1px;
			}
		}
		
	}
}
</style>
